<template>
    <u-popup :show="show" @close="close" mode="bottom" :round="10" :closeable="false">
        <view @touchmove.prevent.stop class="popup-common ">
            <view class="title ">{{ nowPayment.assetsTitle }}</view>

            <scroll-view scroll-y="true" class="h-[70vh]  ">
                <view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] py-[30rpx]">

                    <view class="flex justify-around commission-content ">
                        <view class="flex flex-col items-center">
                            <text class="text-[30rpx] text-[var(--text-color-light9)]">订单金额(元)</text>
                            <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                                fen2yuan(state.orderInfo.price.totalPrice
                                ) }}</text>
                        </view>
                        <view class="flex flex-col items-center">
                            <text class="text-[30rpx] text-[var(--text-color-light9)]">本次使用(元)</text>
                            <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                                fen2yuan(state.payMethods.totalPayPrice
                                ) }}</text>
                        </view>
                        <view class="flex flex-col items-center">
                            <text class="text-[30rpx] text-[var(--text-color-light9)]">待支付金额(元)</text>
                            <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                                fen2yuan(noPaidPrice
                                ) }}</text>
                        </view>
                    </view>
                    <up-line dashed style="margin-top: 20rpx;"
                        v-if="nowPayment.rebatePrice > 0 && nowPayment.payStatus"></up-line>
                    <view class="flex justify-around  mt-[20rpx]"
                        v-if="nowPayment.rebatePrice > 0 && nowPayment.payStatus">
                        <view class="flex flex-col items-center w-[100%]">
                            <text class="text-[30rpx] text-[var(--text-color-light9)]">{{ nowPayment.assetsTitle
                                }}优惠金额(元)</text>
                            <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                                nowPayment.usingDis ? fen2yuan(nowPayment.rebatePrice) : fen2yuan(0) }}</text>
                        </view>

                    </view>
                    <up-line dashed style="margin-top: 20rpx;"
                        v-if="nowPayment.duePrice > 0 && !nowPayment.payStatus"></up-line>
                    <view class="flex justify-around  mt-[20rpx]"
                        v-if="nowPayment.duePrice > 0 && !nowPayment.payStatus">
                        <view class="flex flex-col items-center w-[100%]">
                            <text class="text-[30rpx] text-[var(--text-color-light9)]">{{ nowPayment.assetsTitle
                                }}优惠金额(元)</text>
                            <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                                nowPayment.usingDis ? fen2yuan(nowPayment.duePrice) : fen2yuan(0) }}</text>
                        </view>

                    </view>

                </view>
                <view class="card-template mt-[30rpx]">
                    <view class="font-500 text-[34rpx] text-[#333] leading-[42rpx]">{{ inputLabel }}
                    </view>
                    <view
                        class="flex pt-[30rpx] pb-[8rpx] items-center border-0 border-b-[2rpx] border-solid border-[#F1F2F5]">
                        <text class="pt-[4rpx] text-[40rpx] text-[#333] iconfont iconrenminbiV6xx price-font "></text>
                        <input type="digit" :disabled="nowPayment.payStatus || nowPayment.usingDis"
                            class="h-[76rpx] leading-[76rpx] pl-[10rpx] flex-1 font-500 price-font text-[44rpx] bg-[#fff]"
                            v-model="nowPayment.usePayBalance" maxlength="7" :placeholder="`请输入${inputLabel}`"
                            placeholder-class="apply-price" :adjust-position="false" />
                        <u-checkbox-group @change="disChange()" class="items-center">
                            <u-checkbox activeColor="var(--primary-color)" :disabled="!nowPayment.usabledis"
                                :checked="nowPayment.usingDis" shape="circle" size="44rpx" />
                            <text class="!text-[40rpx]">
                                折扣
                            </text>

                        </u-checkbox-group>
                        <!-- <text @click="clearMoney" v-if="nowPayment.usePayBalance"
                            class="nc-iconfont nc-icon-cuohaoV6xx1 !text-[44rpx] text-[var(--text-color-light9)]"></text> -->
                    </view>
                    <view class="pt-[16rpx] flex items-center justify-between px-[4rpx]">
                        <view class="text-[34rpx] text-[var(--text-color-light6)] price-font leading-[36rpx]">
                            <text>余额:￥{{ fen2yuan(nowPayment.totalBalance) }}(本次可用:￥{{
                                fen2yuan(nowPayment.usableBalance)
                            }})</text>
                        </view>
                        <view class="text-[34rpx] text-primary leading-[36rpx]" v-if="nowPayment.usePayBalance != ''"
                            @click="onHandleCancel()">取消使用
                        </view>
                        <view class="text-[34rpx] text-primary leading-[36rpx]" v-if="!nowPayment.usePayBalance"
                            @click="handleAllPay()">全额支付
                        </view>
                    </view>
                </view>

            </scroll-view>
            <!-- <u-keyboard mode="number" @change="valChange" @backspace="backspace" :overlay="false" :showTips="false"
                :tooltip="false" safeAreaInsetBottom :show="show" class="keyboard-common">
            </u-keyboard> -->
            <view class="btn-wrap">
                <button class="primary-btn-bg btn" :loading="submitLoading" @click="confirm">确认</button>
            </view>
        </view>
    </u-popup>


</template>
<script setup lang="ts">
import { ref, watch, computed, reactive } from 'vue'
import { fen2yuan, yuan2fen } from '@/utils/formatting';




const props = defineProps({
    orderInfo: {
        type: Object,
        default: () => {
            return {

            }
        }
    }, //订单信息
    paymentMap: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const nowPaymenthds = ref() //当前使用的资产
const state = reactive({
    orderInfo: computed(() => {
        return props.orderInfo
    }), // 支付单信息
    payMethods: computed(() => {
        return props.paymentMap
    }) as any, // 可选的支付方式
    payment: '', // 选中的支付方式
    payOrderList: [] as any, //当前支付方式的支付流水号
    activeName: '', //当前选中的支付方式
})
const inputLabel = computed(() => {
    let label = '使用金额'

    return label
})
const handleAllPay = () => {
    // 如果可用余额大于待支付金额 支付金额就是待支付金额
    if (noPaidPrice.value < nowPayment.value!.usableBalance) {
        nowPayment.value.usePayBalance = fen2yuan(noPaidPrice.value)
    } else {
        nowPayment.value.usePayBalance = fen2yuan(nowPayment.value!.usableBalance)
    }

    // onConfirm()
}
const noPaidPrice = computed(() => {
    console.log('noPaidPrice', state.orderInfo.price.payPrice, nowPayment.value.duePrice, nowPayment.value.usingDis)
    if (
        state.orderInfo.price.payPrice &&
        uni.$u.test.isEmpty(nowPayment.value.duePrice) &&
        nowPayment.value.usingDis
    ) {
        return state.orderInfo.price.payPrice - nowPayment.value.duePrice
    } else if (
        state.orderInfo.price.payPrice &&
        uni.$u.test.isEmpty(nowPayment.value.duePrice) &&
        !nowPayment.value.usingDis
    ) {
        return state.orderInfo.price.payPrice
    } else {
        return 0
    }
})
const nowPayment = ref<any>({})
const nowPaymentIndex = ref<any>() //当前支付方式的下标


const show = ref(false)
const emits = defineEmits(['confirm', 'success'])

const disChange = () => {
    nowPayment.value.usingDis = !nowPayment.value.usingDis
    onUsingDisChange()
}

// 清空提现金额
const clearMoney = () => {
    nowPayment.value.usePayBalance = '';
}





const close = () => {
    show.value = false


}


const open = (payMethods: any) => {
    console.log(payMethods)
    show.value = true
    nowPaymenthds.value = state.payMethods
    nowPayment.value = payMethods
    if (nowPayment.value.payStatus) {
        // 如果是使用状态 折扣属性不能修改
        nowPayment.value.usabledis = false
        nowPayment.value.usePayBalance = fen2yuan(nowPayment.value.paybalance)
    } else if (nowPayment.value.usingDis) {
        onUsingDisChange()
    } else {
        nowPayment.value.usePayBalance = ''
    }

}


const submitLoading = ref(false)

const onUsingDisChange = () => {
    if (nowPayment.value.usingDis) {
        handleAllPay()
    }

}

// 监听支付方式的变化
// watch(
//     () => state.payMethods,
//     () => {
//         console.log(nowPaymentIndex.value)
//         if (nowPaymentIndex.value == undefined) {
//             return
//         }

//         nowPayment.value = state.payMethods.items[nowPaymentIndex.value]
//         if (nowPayment.value.payStatus) {
//             // 如果是使用状态 折扣属性不能修改
//             nowPayment.value.usabledis = false
//             nowPayment.value.usePayBalance = fen2yuan(nowPayment.value.paybalance)
//         } else if (nowPayment.value.usingDis) {
//             onUsingDisChange()
//         } else {
//             nowPayment.value.usePayBalance = ''
//         }
//     }
// )


const confirm = () => {
    console.log(nowPaymenthds.value)

    console.log(nowPayment.value)
    if (!nowPayment.value.usePayBalance) {
        uni.showToast({
            title: '支付金额不能为空',
            icon: 'none'
        })
        return
    }

    if (Number(nowPayment.value.usePayBalance) < 0) {
        uni.showToast({
            title: '支付金额必须大于0',
            icon: 'none'
        })
        return
    }
    let item = nowPayment.value
    item.payStatus = true
    item.paybalance = yuan2fen(nowPayment.value.usePayBalance)
    emits('confirm', item, nowPaymenthds.value.classify)
    close()






}
const onHandleCancel = () => {
    clearMoney()
    let item = nowPayment.value
    item.payStatus = false

    emits('confirm', item, nowPaymenthds.value.classify)
}

defineExpose({
    open,

})
</script>
<script lang="ts">
export default {
    options: {
        styleIsolation: 'shared'
    }
}  
</script>
<style lang="scss" scoped>
:deep(.apply-price) {
    color: var(--text-color-light9);
    font-size: 34rpx;
    font-weight: normal;
    line-height: 76rpx;
}

.popup-common .title {
    font-weight: 500;
    text-align: center;
    font-size: 1.125rem;
    padding-top: 1.125rem;
    line-height: 1;
    padding-bottom: 0;
}

.commission-bg {
    background: #f6f6f6;
}

.commission-content>view {
    position: relative;
    width: 6.5625rem
}

.commission-content>view:after {
    content: "";
    position: absolute;
    width: .0625rem;
    height: 1.875rem;
    background-color: var(--temp-bg);
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.commission-content>view:last-of-type:after {
    width: 0;
    height: 0
}
</style>